*{margin: 0;padding: 0;}
@keyframes animate {
    0%{
        transform:rotate(0deg)
    }
    100%{
        transform:rotate(360deg)
    }
}
@keyframes animate1 {
    0%{
        transform:rotate(30deg)
    }
    100%{
        transform:rotate(0deg)
    }
}
@keyframes animate2 {
    0%{
        transform:rotate(0deg)
    }
    100%{
        transform:rotate(30deg)
    }
}
.content{
    width: 400px;
    margin: 100px auto;
    text-align: center;
    position: relative;
}
.bg{
    border-radius: 50%;
    animation: animate 10s linear infinite;
    animation-play-state: paused;
}
.play-btn{
    width: 100px;
}
.ganzi{
    z-index: 100;
    position: absolute;
    top: 14px;
    left: -80px;
    transform: rotate(30deg);
    transform-origin: 59px 60px;
    /* animation: animate1 1s linear infinite;
    animation-play-state: paused; */
}